<template>
  <el-form :model="formVerify" label-width="120px" >
    <el-form-item label="管理员名字：" :rules="[
        { required: true,  }
      ]">
      <el-input v-model="formVerify.adminname" placeholder="请输入名字" style="width:200px" require-asterisk-position="left"/>
    </el-form-item>
    <el-form-item label="密码：" :rules="[
        { required: true, message: 'age is required' },
      ]">
      <el-input v-model="formVerify.password" type="password" placeholder="请输入密码" style="width: 200px;" require-asterisk-position="left"/>
    </el-form-item>
    <el-form-item label="角色：">
      <el-radio-group v-model="formVerify.role" class="ml-4">
        <el-radio :label="1" size="large">超级管理员</el-radio>
        <el-radio :label="2" size="large">普通管理员</el-radio>
      </el-radio-group>
    </el-form-item>
    <p>
            <el-tree ref="treeRef" :data="data" show-checkbox node-key="id" highlight-current />
        </p>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">添加</el-button>
    </el-form-item>
  </el-form>
</template>
<script setup lang="ts">
import { reactive,ref } from 'vue'
import service from '../../../until/service';
import { ElMessage,ElTree } from 'element-plus'
import 'element-plus/dist/index.css';
// 在setup函数里（setup语法糖里），如果想使用路由对象。
import { useRouter } from "vue-router";
import {menudata as data} from "../../../grants/menudata"
import type {TreeKey} from "element-plus/es/components/tree/src/tree.type"
const $router = useRouter();
interface IAdmin {
  "adminname": string,
  "password": string,
  "role": number,//1:表示超级管理员，2：普通管理员
  "checkedKeys": string[]
}
// 定义管理员数据
const formVerify:any = reactive<IAdmin>({
  "adminname": '',
  "password": '',
  "role": 1,
  "checkedKeys": []

})
const zhe = /[0-9A-Za-z]{6,15}/g
let  treeRef = ref<InstanceType<typeof ElTree>>();
// 非空验证
const onSubmit = () => {
  let arr:TreeKey[] = treeRef.value!.getCheckedKeys();//获取的是选中状态的菜单项。

let halfArr:TreeKey[] = treeRef.value!.getHalfCheckedKeys();//获取半选中状态的菜单项。

arr = arr.concat(halfArr);

formVerify.checkedKeys = arr ;
  if (formVerify.adminname == '') {
    ElMessage({
      message: '请输入管理员姓名',
      type: 'error',
    })
  } else if (formVerify.password == '') {
    ElMessage({
      message: '请输入密码',
      type: 'error',
    })
  }
  else if (formVerify.adminname.length > 6) {
    ElMessage({
      message: '管理员长度不能大于6',
      type: 'error',
    })
  }
  else if(!zhe.test(formVerify.password)){
            ElMessage({
                message:"密码格式错误",
                type:"error"
            })
        }
  else {
    // 添加管理员
    service({
      url: "/admin/add",
      method: "post",
      data: formVerify
    })
      .then(res => {
        if (res.data.code === "200") {
          ElMessage({
            message: '添加成功',
            type: 'success',
          })
          $router.push('/admin/manageList')
        } else {
          console.log(10005)
          ElMessage({
            message: res.data.message,
            type: 'error',
          })
        }
      })
  }

}
</script>
<style></style>